<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/shoppingCar.css">
		<link rel="icon" href="./icon/title_vagetable.png">
		<title>购物车页面</title>
	</head>
	<body>
		<header>
			<span class="name">购物车</span>
		</header>
		<div class="shopping">
			<ul class="shoppingList">
				<li>
					<input type="checkbox">
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic1.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">丛林物语双面印花磨毛四件套</div>
							<div class="size">1.8M;米白色</div>
							<div class="price">￥<span>399.00</span></div>
						</div>
					</a>
					<div class="quantity">
						<div class="reduce">-</div>
						<input class="detail" value="2">
						<div class="add">+</div>
					</div>
					<div class="close">
						<img src="./img/shippingAddress/icon5.png" alt="">
					</div>
				</li>
				<li>
					<input type="checkbox">
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic2.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">璀璨灵动 手镯</div>
							<div class="size">手镯</div>
							<div class="price">￥<span>181.00</span></div>
						</div>
					</a>
					<div class="quantity">
						<div class="reduce">-</div>
						<input class="detail" value="2">
						<div class="add">+</div>
					</div>
					<div class="close">
						<img src="./img/shippingAddress/icon5.png" alt="">
					</div>
				</li>
				<li>
					<input type="checkbox">
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic3.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">28寸 纯PC”铝矿”（非全铝）</div>
							<div class="size">神秘灰</div>
							<div class="price">￥<span>439.00</span></div>
						</div>
					</a>
					<div class="quantity">
						<div class="reduce">-</div>
						<input class="detail" value="2">
						<div class="add">+</div>
					</div>
					<div class="close">
						<img src="./img/shippingAddress/icon5.png" alt="">
					</div>
				</li>
			</ul>
			<div class="total">
				<div class="detail">
					<div class="checkbox">
						<label>
							<input id="all" type="checkbox">
							<span>全选</span>
						</label>
					</div>
					<div class="price">￥<span>0.00</span></div>
				</div>
				<button id="submit" type="button">下单</button>
			</div>
		</div>

		<div class="Recommend">
			<div class="title">猜你喜欢</div>
			<ul class="RecommendList">
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/01.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">璀璨灵动 项链</div>
							<div class="price">￥149 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/02.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">JD玉髓锆石镶嵌银项链</div>
							<div class="price">￥199 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/03.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">清新趣粉全棉四件套</div>
							<div class="price">￥399 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/04.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">全棉针织条纹四件套</div>
							<div class="price">￥219 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic4.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">色织水洗棉格纹四件套</div>
							<div class="price">￥219 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic5.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">20寸全铝镁合金登机箱</div>
							<div class="price">￥699 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic6.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">20寸 PC膜拉链登机箱</div>
							<div class="price">￥249 </div>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="image">
							<img src="./img/shoppingCar/pic7.jpg" alt="">
						</div>
						<div class="info">
							<div class="name">104寸纯PC拉链斜纹拉杆箱</div>
							<div class="price">￥299 </div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="tabbar">
			<ul>
				<li onclick="location.assign('./index.html')">
					<div class="icon"><img src="./img/tabbar/tabbar1.png" alt=""></div>
					<div class="title">首页</div>
				</li>
				<li onclick="location.assign('./optimization.html')">
					<div class="icon"><img src="./img/tabbar/tabbar2.png" alt=""></div>
					<div class="title">优选</div>
				</li>
				<li onclick="location.assign('./classify.html')">
					<div class="icon"><img src="./img/tabbar/tabbar3.png" alt=""></div>
					<div class="title">分类</div>
				</li>
				<li>
					<div class="icon"><img src="./img/tabbar/tabbar4-active.png" alt=""></div>
					<div class="title">购物车</div>
				</li>
				<li onclick="location.assign('./userCenter.html')">
					<div class="icon"><img src="./img/tabbar/tabbar5.png" alt=""></div>
					<div class="title">我的</div>
				</li>
			</ul>
		</div>
		<script>
			let oList = document.querySelector('.shoppingList')
			Array.from(oList.children).forEach(function(item) {
				init(item)
			})
			
			// 初始化函数
			function init(e) {
				let oAll = document.querySelector('#all')
				let oSpan = document.querySelector('#all+span')
				// 绑定全选框控制复选框
				oAll.addEventListener('click', function() {
					cul()
					Array.from(oList.children).forEach(function(item) {
						item.children[0].checked = oAll.checked
					})
					this.checked ? oSpan.innerHTML = '取消全选' : oSpan.innerHTML = '全选'
				})
				// 绑定复选框控制全选框
				e.children[0].addEventListener('click', function() {
					cul()
					oAll.checked = true
					Array.from(oList.children).forEach(function(item) {
						if (!item.children[0].checked) {
							oAll.checked = false
							oSpan.innerHTML = '全选'
						}
					})
					oAll.checked === true ? (oAll.checked = true, oSpan.innerHTML = '取消全选') : ''
				})

				// 减少数量监听事件
				e.children[2].firstElementChild.addEventListener('click', function() {
					this.nextElementSibling.value != 0 ? this.nextElementSibling.value-- : ''
					cul()
				})

				// 增加数量监听事件
				e.children[2].lastElementChild.addEventListener('click', function() {
					this.previousElementSibling.value++
					cul()
				})

				// 自定义数量监听事件
				e.children[2].children[1].addEventListener('change', function() {
					let Num = this.value.trim()
					if (isNaN(Num) || Num < 0) {
						this.value = 1
						return false
					}
					cul()
				})

				// 删除事件
				e.children[3].firstElementChild.addEventListener('click', function() {
					this.closest('li').children[0].checked = false
					this.closest('li').style.display = 'none'
					cul()
				})
				cul()
			}

			// 计算总价函数
			function cul() {
				let oAll_price = document.querySelector('.total .price span')
				let aPrice = 0
				Array.from(oList.children).forEach(function(item) {
					if (item.children[0].checked) {
						let oPrice = item.querySelector('.price span').innerText
						let oNum = item.children[2].children[1].value
						aPrice += parseFloat(oNum) * parseFloat(oPrice)
					}
				})
				oAll_price.innerText = aPrice.toFixed(2)
			}

			let oBtn = document.querySelector('#submit')
			oBtn.addEventListener('click', function() {
				/**
				 * 添加购物车功能
				 * */
				// let li = document.createElement('li')
				// li.innerHTML = `
				// <input type="checkbox" checked>
				// <a href="#">
				// 	<div class="image">
				// 		<img src="./img/shoppingCar/pic3.jpg" alt="">
				// 	</div>
				// 	<div class="info">
				// 		<div class="name">28寸 纯PC”铝矿”（非全铝）</div>
				// 		<div class="size">神秘灰</div>
				// 		<div class="price">￥<span>439.00</span></div>
				// 	</div>
				// </a>
				// <div class="quantity">
				// 	<div class="reduce">-</div>
				// 	<input class="detail" value="2">
				// 	<div class="add">+</div>
				// </div>
				// <div class="close">
				// 	<img src="./img/shippingAddress/icon5.png" alt="">
				// </div>
				// `
				// oList.append(li)
				// init(li)
			})
		</script>
	</body>
</html>
